<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>{{ .Site.Title }}</title>
<meta name="theme-color" content="#2C2E2F" />
<meta name="keywords" content="Webstack Hugo theme">
<meta name="description" content="Webstack Hugo theme">
<meta property="og:type" content="article">
<meta property="og:url" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<link rel="shortcut icon" href="./assets/favicon.png">
<link rel="apple-touch-icon" href="./assets/app-ico.png">
<link rel='stylesheet' id='font-awesome-css'  href='./assets/css/font-awesome.min.css?ver=4.7.0' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='./assets/css/bootstrap.css?ver=3.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='nav-css'  href='./assets/css/nav.css?ver=2.0.0' type='text/css' media='all' />
<script type='text/javascript' src='./assets/js/jquery-1.11.1.min.js'></script>
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?86cead3bcab6a1417189e6138d69262";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
</head>
<body class="page-body {{ if .Site.Params.darkmode.enable }}black{{ else }}white{{ end }}">
    <div class="page-container">
        <div class="sidebar-menu toggle-others fixed">
            <div class="sidebar-menu-inner">
                <header class="logo-env">
                    <!-- logo -->
                    <div class="logo">
                        <a href="index.html" class="logo-expanded">
                            <img src="./assets/images/logo@2x.png" height="40" alt="" />
                        </a>
                        <a href="index.html" class="logo-collapsed">
                            <img src="./assets/images/logo-collapsed@2x.png" height="40" alt="">
                        </a>
                    </div>
                    <div class="mobile-menu-toggle visible-xs">
                        <a href="#" data-toggle="mobile-menu">
                            <i class="fa fa-bars"></i>
                        </a>
                    </div>
                </header>
                <ul id="main-menu" class="main-menu">
                    {{ range .Site.Data.webstack }}
                    {{ if .list }}
                        <li>
                            <a>
                               <i class="fa {{ .icon }} fa-fw"></i>
                               <span class="title">{{ .taxonomy }}</span>
                            </a>
                            <ul>
                                {{ range .list }}    
                                <li>
                                    <a href="#{{ md5 .term }}" class="smooth">{{ .term }}</a>
                                </li>
                                {{ end }}
                            </ul>
                        </li>
                    {{ else }}
                        <li>
                            <a href="#{{ md5 .taxonomy }}" class="smooth">
                               <i class="fa {{ .icon }} fa-fw"></i>
                               <span class="title">{{ .taxonomy }}</span>
                            </a>
                        </li> 
                    {{ end }}
                    {{ end }}
                    <li>
                        <a href="./about">
                            <i class="fa fa-heart fa-fw"></i>
                            <span class="tooltip-blue">关于本站</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main-content">
<nav class="navbar user-info-navbar" role="navigation">
    <div class="navbar-content">
        <ul class="user-info-menu left-links list-inline list-unstyled">
            <li class="hidden-xs">
            <a href="#" data-toggle="sidebar"><i class="fa fa-bars"></i></a>
            </li>
      </ul>
    </div>
    <a href="https://github.com/iplaycode/webstack-hugo" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
</nav>
{{ template "search.html" . }}
<div class="sites-list" style="margin-bottom: 8.5rem;">
{{ range .Site.Data.webstack }}
    {{ if .list }}
        {{ range .list }}
        <!-- {{ .term }} -->
        <h4 class="text-gray" style="display: inline-block;"><i class="icon-io-tag" style="margin-right: 27px;" id="{{ md5 .term }}"></i>{{ .term }}</h4>
            <div class="row">
            {{ range .links }}
                {{ if .qrcode }}
                <div class="xe-card col-sm-4 col-md-3 qrcode">
                    <a href="javascript:" target="" class="xe-widget xe-conversations box2 label-info" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<img src='{{ .qrcode }}' width='128'>">
                        <div class="xe-comment-entry">
                            <div class="xe-user-img">
                                <img class="img-circle lazy" src="./assets/images/favicon.png" data-src="{{ .logo }}" onerror="javascript:this.src='./assets/images/favicon.png'" width="40">
                            </div>
                            <div class="xe-comment">
                                <div class="xe-user-name overflowClip_1">
                                    <strong>{{ .title }}</strong>
                                </div>
                                <p class="overflowClip_2">{{ .description }}</p>
                            </div>
                        </div>
                    </a>
                </div>
                {{ else }}
                <div class="xe-card col-sm-4 col-md-3 ">
                    <a href="{{ .url }}" target="_blank" class="xe-widget xe-conversations box2 label-info" data-toggle="tooltip" data-placement="bottom"  title="{{ .url }}">
                        <div class="xe-comment-entry">
                            <div class="xe-user-img">
                                <img class="img-circle lazy" src="./assets/images/favicon.png" data-src="{{ .logo }}" onerror="javascript:this.src='./assets/images/favicon.png'" width="40">
                            </div>
                            <div class="xe-comment">
                                <div class="xe-user-name overflowClip_1">
                                    <strong>{{ .title }}</strong>
                                </div>
                                <p class="overflowClip_2">{{ .description }}</p>
                            </div>
                        </div>
                    </a>
                </div>
                {{ end }}
            {{ end }}
            </div>
        <br />
        <!--END {{ .term }} -->
        {{ end }}
    {{ else }}
        <!-- {{ .taxonomy }} -->
        <h4 class="text-gray" style="display: inline-block;"><i class="icon-io-tag" style="margin-right: 27px;" id="{{ md5 .taxonomy }}"></i>{{ .taxonomy }}</h4>
            <div class="row">
            {{ range .links }}
                {{ if .qrcode }}
                <div class="xe-card col-sm-4 col-md-3 qrcode">
                    <a href="javascript:" target="" class="xe-widget xe-conversations box2 label-info" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<img src='{{ .qrcode }}' width='128'>">
                        <div class="xe-comment-entry">
                            <div class="xe-user-img">
                                <img class="img-circle lazy" src="./assets/images/favicon.png" data-src="{{ .logo }}" onerror="javascript:this.src='./assets/images/favicon.png'" width="40">
                            </div>
                            <div class="xe-comment">
                                <div class="xe-user-name overflowClip_1">
                                    <strong>{{ .title }}</strong>
                                </div>
                                <p class="overflowClip_2">{{ .description }}</p>
                            </div>
                        </div>
                    </a>
                </div>
                {{ else }}
                <div class="xe-card col-sm-4 col-md-3 ">
                    <a href="{{ .url }}" target="_blank" class="xe-widget xe-conversations box2 label-info" data-toggle="tooltip" data-placement="bottom"  title="{{ .url }}">
                        <div class="xe-comment-entry">
                            <div class="xe-user-img">
                                <img class="img-circle lazy" src="./assets/images/favicon.png" data-src="{{ .logo }}" onerror="javascript:this.src='./assets/images/favicon.png'" width="40">
                            </div>
                            <div class="xe-comment">
                                <div class="xe-user-name overflowClip_1">
                                    <strong>{{ .title }}</strong>
                                </div>
                                <p class="overflowClip_2">{{ .description }}</p>
                            </div>
                        </div>
                    </a>
                </div>
                {{ end }}
            {{ end }}
            </div>
        <br />
        <!--END {{ .taxonomy }} -->
    {{ end }}
{{ end }}
</div>
            <footer class="main-footer sticky footer-type-1">
                <div class="go-up">
                    <a href="#" rel="go-top">
                        <i class="fa fa-angle-up"></i>
                    </a>
                </div>
                <div class="footer-inner">
                    <div class="footer-text">
                        Copyright © {{ now.Format "2006"}} <a href=""><strong>{{ if .Site.Copyright }}{{ .Site.Copyright | safeHTML }}{{ else }}iplaycode{{ end }}</strong></a>&nbsp;&nbsp;Design by <a href="http://viggoz.com" target="_blank"><strong>Viggo</strong></a>&nbsp;&nbsp;Themes by <a href="https://github.com/iplaycode" target="_blank"><strong>iplaycode</strong></a>
                    </div>
                </div>
            </footer>
        </div>
    </div>
<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '.has-sub', function(){
            var _this = $(this)
            if(!$(this).hasClass('expanded')) {
               setTimeout(function(){
                    _this.find('ul').attr("style","")
               }, 300);
              
            } else {
                $('.has-sub ul').each(function(id,ele){
                    var _that = $(this)
                    if(_this.find('ul')[0] != ele) {
                        setTimeout(function(){
                            _that.attr("style","")
                        }, 300);
                    }
                })
            }
        })
        $('.user-info-menu .hidden-xs').click(function(){
            if($('.sidebar-menu').hasClass('collapsed')) {
                $('.has-sub.expanded > ul').attr("style","")
            } else {
                $('.has-sub.expanded > ul').show()
            }
        })
        $("#main-menu li ul li").click(function() {
            $(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式
            $(this).addClass('active'); // 添加当前元素的样式
        });
        $("a.smooth").click(function(ev) {
            ev.preventDefault();
            if($("#main-menu").hasClass('mobile-is-visible') != true)
                return;
            public_vars.$mainMenu.add(public_vars.$sidebarProfile).toggleClass('mobile-is-visible');
            ps_destroy();
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top - 80
            }, {
                duration: 500,
                easing: "swing"
            });
        });
        return false;
    });

    var href = "";
    var pos = 0;
    $("a.smooth").click(function(e) {
        e.preventDefault();
        if($("#main-menu").hasClass('mobile-is-visible') === true)
            return;
        $("#main-menu li").each(function() {
            $(this).removeClass("active");
        });
        $(this).parent("li").addClass("active");
        href = $(this).attr("href");
        pos = $(href).position().top - 100;
        $("html,body").animate({
            scrollTop: pos
        }, 500);
    });
</script>
<script type='text/javascript' src='./assets/js/bootstrap.min.js?ver=3.4.1'></script>
<script type='text/javascript' src='./assets/js/TweenMax.min.js?ver=1.13.1'></script>
<script type='text/javascript' src='./assets/js/perfect-scrollbar.min.js?ver=0.5.8'></script>
<script type='text/javascript' src='./assets/js/nav.js?ver=2.0.0'></script>
<script type='text/javascript' src='./assets/js/lazyload.min.js?ver=2.0.0'></script>
</body>
</html>